<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="height: 400px"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
    <script src="../lib/geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap('中国', { geoJSON: china_geojson })

        const myChart = echarts.init(document.getElementById('main'))
        const option = {
          // 3.在 echarts 中展示中国地图
          geo: [
            {
              map: '中国'
            }
          ],
          series: [
            {
              name: '散点图',
              type: 'effectScatter',

              geoIndex: 0, // geo 支持数组，默认是 0
              coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
              data: [
                {
                  name: '广东',
                  value: [113.280637, 23.125178, 93]
                },
                {
                  name: '北京',
                  value: [116.405285, 39.904989, 199]
                }
              ],

              // ====== 散点大小和着色========
              symbolSize: function (val) {
                console.log(val)
                return val[2] / 10 // 控制散点图的大小
              },

              itemStyle: {
                color: 'green',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
              // ====== 散点大小和着色========
            }
          ]
        }
        myChart.setOption(option)
      }
    </script>
  </body>
</html>
